<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- <script src="../dist/kmin.min.js"></script> -->
    <script type="module" src="../src/kmin.js"></script>
</head>

<body>
    <demo-ui></demo-ui>

    <script type="module">

        regComp('demo-ui', function () {
            // 响应式状态
            let a = this.reactive({
                count: 0,
            });
            // 响应式引用
            let name = this.ref('kmin');
            // 渲染函数
            this.render = () => {
                return `
                <div class="counter">
                    <button data-event="click,decrement">-</button>
                    <span>Count: ${a.count}</span>
                    <span>Name: ${name.value}</span>
                    <button data-event="click,increment">+</button>
                </div>
                <button data-event="click,reset">Reset</button>
                <input type="text" data-event="input,inputEvent">
                `;
            }
            // 输入事件
            this.inputEvent = (e) => {
                console.log(e.target.value);
            }
            // 增加
            this.increment = () => {
                a.count++;
                console.log(a.count)
            }
            // 减少
            this.decrement = () => {
                a.count--;
                console.log(a.count)
            }
            // 重置
            this.reset = () => {
                a.count = 0;
            }
            // css
            this.css = () => {
                return `
                span{
                    color: red;
                }`
            }
        })
    </script>
</body>

</html>